<template>
  <div>
    <!-- @mouseout.stop="aaaa($event)" -->
    <div ref="container" class="container-content">
      <div class="items" v-for="(e, i) in paramList" :key="i" v-append="{
        el: e.typeEl,
        options: e
      }" />
    </div>

    <zmTreeOrg v-if="false" :data="data" center :props="propsData" :define-menus="defineMenus"
      :toolBar="{ scale: false, restore: false, expand: false, zoom: false, fullscreen: false }" :horizontal="horizontal"
      :collapsable="collapsable" :label-style="style" :draggable="nodeDraggable" :only-one-node="onlyOneNode"
      :clone-node-drag="cloneNodeDrag" :before-drag-end="beforeDragEnd" :default-expand-level="defaultExpandLevel"
      @on-expand-all="onExpandAll" @on-node-drag="nodeDragMove" @on-node-drag-end="nodeDragEnd" @on-contextmenu="onMenus"
      @on-expand="onExpand" @on-node-dblclick="onNodeDblclick" @on-node-click="onNodeClick" :node-edit="nodeEdit">
      <!-- 自定义节点内容 -->
      <template v-slot="{ node }">
        <div :class="['tree-org-node__text node-label', {
          'root-node': node.$$data.side
        }]">
          {{ node.$$data.name }}
        </div>
      </template>

      <!-- 自定义展开按钮 -->
      <!-- <template v-slot:expand="{ node }">
    </template> -->
    </zmTreeOrg>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import Vue from 'vue';
import zmTreeOrg from "zm-tree-org"
import lisRoot from './components/lisRoot'
// import lisNumber from './components/lisNumber'
// import lisSelect from './components/lisSelect'
// import lisCheckbox from './components/lisCheckbox'
// import lisText from './components/lisText'
// // import lisPath from './components/lisPath'
// import lisDatabase from './components/lisDatabase'
// import lisCode from './components/lisCode'
import lisAction from './components/lisAction'
import lisSequence from './components/lisSequence'
import lisSelect from './components/lisSelect'
import lisUnit from "./components/lisUnit";
import lisSimpleParallel from "./components/lisSimpleParallel";
// import { debounce } from '@/utils/tool'
export default {
  name: "container",
  data() {
    return {
      paramList: [],
      templateMap: {
        "root": Vue.extend(lisRoot),
        "action": Vue.extend(lisAction),
        "sequence": Vue.extend(lisSequence),
        "select": Vue.extend(lisSelect),
        "simpleParallel": Vue.extend(lisSimpleParallel),
        "unit": Vue.extend(lisUnit),
      },
      defaultValue: {},

      cloneNodeDrag: false,
      horizontal: true,
      collapsable: false,
      nodeDraggable: true,
      onlyOneNode: false,
      expandAll: false,
      disaled: false,
      style: {
        background: "#396cd0",
        color: "#fff",
      },
      height: 0,
      data: {},
      defaultExpandLevel: 0,
      propsData: {},
    };
  },
  mounted() {
    this.$EventBus.$on('defaultValue', e => {
      this.defaultValue = e
      const cell = this.graph.getSelectedCells()[0]
      cell.store.data.value = this.defaultValue
      console.log("cell", cell)
      this.optForNode(cell)
    })
    console.log("this.containerData", this.containerData)
    this.getParamList(this.containerData.containerDetail)
  },

  computed: mapState({
    containerData: state => state.dagStore.containerData,
    graph: state => state.dagStore.graph,
  }),
  watch: {
    containerData: {
      handler(val) {
        console.log("val", val)
        this.getParamList(val.containerDetail)
      },
      // 开启深度监听
      deep: true
    }
  },
  methods: {
    ...mapActions(['assignGraph']),
    ...mapActions(['getModelShapes', 'assignGraph', 'optForNode', 'unOptForNode']),
    getParamList(list) {
      console.log("list", list)
      this.paramList = []
      let temp = []
      let canvas_id = this.$route.query.canvas_id
      list.forEach(ele => {
        console.log("ele.type", ele.type)
        let Controller = this.templateMap[ele.type]
        let controller = new Controller()
        controller.ref = "child"

        controller.data = ele.defaultValue
        for (let i in ele) {
          if (ele[i] == 'True') {
            ele[i] = true
          }
          if (ele[i] == 'False') {
            ele[i] = false
          }
        }
        ele.canvas_id = canvas_id
        temp.push({
          type: ele.type,
          content: ele,
          dagStructure: this.dagStructure,
          typeEl: controller
        })
      })
      setTimeout(() => {
        this.paramList = temp
        console.log(temp)
      })
    },
    // aaaa($event) {
    //   $event.stopPropagation();
    //   debounce(() => {
    //     this.paramList[0].content.defaultValue = this.defaultValue1
    //   }, 700)()
    // }
    saveParamList() {

    },



    /** 动态显示右键菜单
     * @param {MouseEvent} e 节点元素
     * @param {object} data 节点数据
    */
    defineMenus() {
      return [
        { name: '复制文本', command: 'copy' },
        { name: '新增节点', command: 'add' },
        { name: '编辑文本', command: 'edit' },
        { name: '删除节点', command: 'delete' }
      ]
    },

    /** 菜单项点击事件
     * @param {object} node 当前节点数据 
     * @param {string} command 点击的菜单标识 
     */
    onMenus({ node, command }) {
      console.log(`菜单项点击事件-${command}: `, node);

      if (["editNode"].includes(command)) {
        // editNodeData.value = node;
        console.log(node);
      }
    },


    nodeEdit(node) {
      // emits("editTreeNode", node);
      console.log(node);
    },


    // 拖拽过程
    nodeDragMove() {
      // console.log("nodeDragMove");
      // console.log(data);
    },
    beforeDragEnd(node, targetNode) {
      return new Promise((resolve, reject) => {
        if (!targetNode) reject()
        if (node.id === targetNode.id) {
          reject()
        } else {
          resolve()
        }
      })
    },
    nodeDragEnd(data, isSelf) {
      console.log(data, isSelf);
    },
    /** 节点双击事件
     * @param {MouseEvent} e 节点元素
     * @param {object} data 节点数据
     */
    onNodeDblclick(e, data) {
      console.log("节点双击事件: ", e, data);
    },
    /** 节点单击事件
     * @param {MouseEvent} e 节点元素
     * @param {object} data 节点数据
     */
    onNodeClick(e, data) {
      console.log("节点双击事件: ", e, data);
    },
    // 节点展开事件
    onExpand(e, data) {
      console.log(e, data);
    },
    // 节点全部展开/收起事件
    onExpandAll(b) {
      console.log(b);
    },
  },
  destroyed() {
    this.paramList[0].content.defaultValue = this.defaultValue1
  },
  components: { zmTreeOrg }
};
</script>

<style lang="less" scoped>
.items {
  padding-bottom: 20px;
}

.container-content {
  padding-top: 20px;
}




// 树形图组件
.zm-tree-org {
  background: transparent;
}

// 节点内容
:deep(.tree-org-node__inner) {
  min-width: 180px !important;
  max-width: 240px !important;
  max-height: 60px;
}

// 根节点
.node-label.root-node {
  background: #396cd0 !important;
  border: 1px solid #396cd0 !important;
}

// 子节点
.tree-org-node__content .node-label {
  background: #152B56;
  color: #fff;
  border: 1px solid #396CD0;
}

/deep/ .el-input {
  .el-input__wrapper {
    background: transparent !important;
  }

  .el-input__inner {
    color: #fff;
  }
}
</style>
